<script setup>
import { reactive, onMounted, nextTick, computed } from "vue";

const props = defineProps({
  tags: {
    type: Array,
    default: [],
  },
});

const emit = defineEmits(["tagsChange:tags"]);

const state = reactive({
  tag_id: [],
});

const initTag = () => {
  state.tag_id = props.tags.map((ele) => {
    return {
      name: ele.name,
      id: ele.tags.map((ele) => ele.id).join(","),
      selectAll: true,
    };
  });
};

// 点击切换头部筛选高亮
const clickItem = (clickedItem, name) => {
  // 查找当前标题下是否已有活动项
  const existingItemIndex = state.tag_id.findIndex(
    (item) => item.name === name
  );
  // 如果已经有活动项且与当前点击的项不同，则替换；否则直接添加新项
  if (existingItemIndex !== -1) {
    // 检查是否点击了同一个项，如果是，则不执行任何操作
    if (state.tag_id[existingItemIndex].id === clickedItem.id) return;
    // 替换为新点击的项
    state.tag_id[existingItemIndex] = {
      name,
      id: clickedItem.id,
      selectAll: false,
    };
  } else {
    // 如果当前标题下没有活动项，则直接添加
    state.tag_id.push({ name, id: clickedItem.id, selectAll: false });
  }
  nextTick(() => {
    console.log(getSelectTages.value, "选择的标签");

    emit("tagsChange", getSelectTages.value);
  });
};
const selectAll = (item) => {
  const index = state.tag_id.findIndex((ele) => ele.name === item.name);
  state.tag_id[index].id = item.tags.map((ele) => ele.id).join(",");
  state.tag_id[index].selectAll = true;
  nextTick(() => {
    emit("tagsChange");
  });
};

// 当前选择的标签, 如果全选 则返回空字符串(后端返回全部的数据)
const getSelectTages = computed(() => {
  const selects = state.tag_id.map((ele) => ele.id);
  if (props.tags.length) {
    let allLength = 0;
    props.tags.forEach((ele) => {
      allLength += ele.tags.length;
    });
    // 判断是否全部选择了
    const mergedLength = selects.flatMap((ele) => {
      return typeof ele == "string" ? ele.split(",") : ele;
    }).length;
    if (mergedLength == allLength) {
      return "";
    } else {
      return selects.join(",");
    }
  } else {
    return "";
  }
});

defineExpose({
  initTag,
  getSelectTages,
});
</script>

<template>
  <div class="filtersComponent">
    <div class="filter_item" v-for="item in props.tags" :key="item.id">
      <div class="filter_item_title">{{ item.name + ":" }}</div>
      <div class="filter_item_list">
        <div
          :class="{
            tag_id:
              state.tag_id.length &&
              state.tag_id.find((ele) => ele.name == item.name)?.selectAll,
          }"
          @click="selectAll(item)"
          class="filter_item_list_item"
        >
          全部
        </div>
        <div
          class="filter_item_list_item"
          :class="{
            tag_id:
              state.tag_id.some(
                (active) => active.name === item.name && active.id === i.id
              ) && !item?.selectAll,
          }"
          v-for="i in item.tags"
          :key="i.id"
          @click="clickItem(i, item.name)"
        >
          {{ i.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
@filter_item_title_color: rgba(28, 31, 35, 0.6);

.filtersComponent {
  .filter_item {
    display: flex;

    .filter_item_list {
      display: flex;
      align-items: center;
      margin-bottom: 8px;

      .filter_item_list_item {
        padding: 4px 10px;
        margin-right: 16px;
        margin-bottom: 8px;
        cursor: pointer;
        color: rgba(28, 31, 35, 0.8);

        &:hover {
          background-color: var(--ss-tag-bgc-color);
          color: var(--ss-primary-color);
          border-radius: 20px;
        }

        &.tag_id {
          background-color: var(--ss-tag-bgc-color);
          color: var(--ss-primary-color);
          border-radius: 20px;
        }
      }
    }

    .filter_item_title {
      color: @filter_item_title_color;
      padding: 4px 10px;
      margin-right: 16px;
      margin-bottom: 8px;
    }
  }
}
</style>
